"use client";
import { getSendCodeApi } from "@/api/user";
import ButtonOwn from "@/components/ButtonOwn";
import DomainFooter from "@/components/DomainFooter";
import HeaderBack from "@/components/HeaderBack";
import { useRouter } from "@/i18n";
import { useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import { FC, useEffect, useRef, useState } from "react";
import "./page.scss";

interface Props {}

const ResetPhone: FC<Props> = () => {
    const t = useTranslations("VerificationPage");
    const router: any = useRouter();
    let [code, setCode] = useState("");
    const changeCode = (e: { target: { value: any } }) => {
        setCode(e.target.value.replace(/[^0-9]/g, ""));
    };

    let searchParams = useSearchParams();
    let user_phone = searchParams.get("userPhone");
    const sendCodeRequest = () => {
        if (!user_phone) return;
        getSendCodeApi({ user_phone }).then((res) => {
            if (res.code == 200) {
                setTime(60);
                setIsNote(true);
            }
        });
    };
    useEffect(() => {
        sendCodeRequest();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    let [isNote, setIsNote] = useState(true);
    let [time, setTime] = useState(60);
    let timeRef: any = useRef();
    useEffect(() => {
        if (time && time != 0) {
            timeRef.current = setTimeout(() => {
                setTime((time) => time - 1);
            }, 1000);
        } else {
            setIsNote(false);
        }
        return () => {
            timeRef.current && clearInterval(timeRef.current);
        };
    }, [time]);
    const sendCodeFun = () => {
        if (isNote) return;
        sendCodeRequest();
    };

    const goPage = () => {
        if (!code || code.length < 6) return;
        router.push(`/confirmPassword?userPhone=${user_phone}&code=${code}`);
    };

    return (
        <div className="verification-box">
            <HeaderBack />
            <div className="main">
                <div className="title">
                    <h2>{t("h2")}</h2>
                    <div>
                        {t("h3")} {user_phone}
                    </div>
                </div>
                <div className="phoneInput">
                    <input
                        type="number"
                        value={code}
                        onChange={changeCode}
                        placeholder={t("Reenviar")}
                        maxLength={6}
                    />
                    <span className="after" onClick={sendCodeFun}>
                        {isNote ? `${time}s` : t("Envie")}
                    </span>
                </div>
                <div className="btnContent">
                    <ButtonOwn active={code.length == 6} callbackFun={goPage}>
                        {t("Completar")}
                    </ButtonOwn>
                </div>
            </div>
            <DomainFooter />
        </div>
    );
};

export default ResetPhone;